<template>
  <div class="" style="width: 100%; height: calc(100vh - 50px)">
    <div class="listcontainer">
      <div class="eachitem" v-for="item in datalist">
        <div style="background-color: #080; height: 21px" class="fwwcc">
          {{ item.dpname }}
        </div>
        <div style="height: calc(100% - 55px - 34px); width: calc(100%)">
          <img
            src="/configuration/dplist.png"
            alt=""
            srcset=""
            style="width: 100%; height: 100%"
          />
        </div>

        <div style="height: 68px" class="fwwcc">
          <el-button
            size="mini"
            @click="
              isadd = false;
              bianji(item);
            "
            >配置编辑</el-button
          >
          <el-button
            size="mini"
            @click="
              isadd = false;
              showyuancheng(item);
            "
            >远程控制</el-button
          >
          <el-button
            size="mini"
            @click="
              isadd = false;
              zujian(item);
            "
            >组件配置</el-button
          >
          <!-- <el-button
            size="mini"
            @click="
              isadd = false;
              bianji(item);
            "
            >配置编辑</el-button
          > -->
          <el-button size="mini" @click="juedui(item)">绝对布局</el-button>
          <el-button size="mini" @click="scene(item)">三维场景</el-button>
          <el-button size="mini" @click="yulan(item.dpkey)">预览</el-button>
          <el-button size="mini" @click="del(item.dpkey)">删除</el-button>
        </div>
      </div>
    </div>
    <div style="position: absolute; top: 10px; right: 10px">
      <el-button type="primary" size="default" @click="showadd()"
        >添加</el-button
      >
    </div>

    <el-dialog
      :title="(isadd ? '添加' : '更新') + '大屏'"
      :visible.sync="showdia"
      width="60%"
    >
      <div style="height: 500px">
        <div style="height: 50px; text-align: left; display: flex">
          <span style="width: 80px; display: inline-block"> 名称： </span>
          <el-input
            v-model="dia.dpname"
            placeholder=""
            style="width: 250px"
          ></el-input>
        </div>
        <!-- <div style="height: 50px; text-align: left; display: flex">
          <span style="width: 80px; display: inline-block"> code： </span>
          <el-input
            v-model="dia.dpkey"
            placeholder=""
            style="width: 250px"
          ></el-input>
        </div> -->
        <div style="text-align: left; display: flex">
          <span style="width: 80px; display: inline-block"> 配置信息： </span>
          <!-- <el-input
            v-model="dia.dpvalue"
            placeholder=""
            style="width: 750px; height: 50px"
            :autosize="{ minRows: 2, maxRows: 20 }"
            type="textarea"
          ></el-input> -->
          <div id="container" style="height: 450px; width: 900px"></div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showdia = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="远程控制"
      :visible.sync="yuanchengdia"
      width="30%"
      @close="yuanchengdia = false"
    >
      <div style="width: 100%; height: 100%">
        <div>
          <div>链接：</div>
          <div>{{ yuanchengurl }}</div>
        </div>
        <div>
          <div>二维码：</div>
          <div>
            <div id="qrCode" ref="qrCodeDiv"></div>
          </div>
        </div>
      </div>

      <span slot="footer">
        <el-button @click="yuanchengdia = false">Cancel</el-button>
        <el-button type="primary" @click="yuanchengdia = false">OK</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from "@/utils/requestshujuyuan";
// import MonacoEditor from "vue-monaco-editor";
import * as monaco from "monaco-editor";

import QRCode from "qrcodejs2";

import { Base64 } from "js-base64";
import uuidv1 from "uuid/v1";

export default {
  // components: { MonacoEditor },
  data() {
    return {
      yuanchengurl: "",
      yuanchengdia: false,
      showdia: false,
      datalist: [],
      dia: {
        dpname: "",
        dptype: "daping",
        dpkey: uuidv1(),
        dpvalue: "",
      },
      isadd: true,
      editor: "",
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.loaddata();
  },
  methods: {
    showyuancheng(item) {
      let url = `https://www.baidu.com?id=${item.dpkey}`;

      this.yuanchengurl = url;

      this.yuanchengdia = true;

      this.$nextTick(function () {
        document.getElementById("qrCode").innerHTML = "";
        this.$nextTick(function () {
          new QRCode(this.$refs.qrCodeDiv, {
            text: url,
            width: 300,
            height: 300,
            colorDark: "#333333", //二维码颜色
            colorLight: "#ffffff", //二维码背景色
            correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
          });
        });
      });
    },

    yuancheng() {},
    initEditor() {
      // 初始化编辑器，确保dom已经渲染
      this.editor = monaco.editor.create(document.getElementById("container"), {
        value: this.dia.dpvalue, //编辑器初始显示文字
        language: "json", //语言支持自行查阅demo
        automaticLayout: true, //自动布局
        theme: "vs-dark", //官方自带三种主题vs, hc-black, or vs-dark
      });
    },
    getValue() {
      this.editor.getValue(); //获取编辑器中的文本
    },
    scene(item) {
      this.$router.push(`/peizhihua/sanweichangjing/${item.dpkey}`);
    },
    juedui(item) {
      this.$router.push(`/peizhihua/jueduibuju/${item.dpkey}`);
    },
    zujian(item) {
      this.$router.push(`/peizhihua/sanweiditu/${item.dpkey}`);
    },
    onMounted(editor) {
      this.editor = editor;
    },
    onCodeChange() {},
    showadd() {
      (this.dia = {
        dpname: "",
        dptype: "daping",
        dpkey: uuidv1(),
        dpvalue: "",
      }),
        (this.showdia = true);
      this.isadd = true;
    },
    del(dpkey) {
      axios.post("/delete", { dpkey: dpkey }).then((res) => {
        this.$message.success("删除成功");
        this.loaddata();
      });
    },
    bianji(item) {
      this.dia = item;
      try {
        this.dia.dpvalue = JSON.stringify(
          JSON.parse(Base64.decode(this.dia.dpvalue)),
          null,
          2
        );
      } catch (error) {
        this.dia.dpvalue = JSON.stringify({});
      }

      this.showdia = true;
      if (this.editor != "") {
        this.editor.setValue(this.dia.dpvalue);
      } else {
        setTimeout(() => {
          this.initEditor();
        }, 0);
      }
    },
    yulan(dpkey) {
      this.$router.push(`/yulan/${dpkey}`);
    },
    loaddata() {
      axios.get("/getlist?dptype=daping").then((res) => {
        this.datalist = res.data;
      });
    },
    add() {
      let params = { ...this.dia };

      params.dpvalue = this.editor.getValue();

      try {
        params.dpvalue = Base64.encode(
          JSON.stringify(JSON.parse(params.dpvalue))
        );
      } catch (error) {
        this.$message.error("格式错误");
        return;
      }

      // delete params["id"];
      // delete params["dpname"];
      if (this.isadd) {
        axios.post("add", params).then((res) => {
          this.showdia = false;
          this.dia = {
            dpname: "",
            dptype: "daping",
            dpkey: uuidv1(),
            dpvalue: "",
          };
          this.$message.success("添加成功");
          this.loaddata();
        });
      } else {
        console.log(params);
        axios.post("update", params).then((res) => {
          this.showdia = false;
          this.dia = {
            dpname: "",
            dptype: "daping",
            dpkey: uuidv1(),
            dpvalue: "",
          };
          this.$message.success("保存成功");
          this.loaddata();
        });
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.listcontainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.eachitem {
  width: 400px;
  height: 250px;
  margin: 10px;
  background-color: rgba(50, 153, 194, 0.856);
}
</style>